<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
      layout:decorator="layout_s">
<head>
    <meta charset="UTF-8">
    <title th:text="${title}"></title>
</head>
<body>
<!-- Begin Page Content -->
<div class="container-fluid mt-4" layout:fragment="content">
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                搜索&添加
                <span id="operators_pack_btn" style="cursor: pointer"><i class="fas fa-angle-up"></i></span>
            </h6>
        </div>
        <div class="card-body" id="operators_panel">
            <!--<div id="operators_panel">-->
            <div class="row screen-group">
                <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 right-group">
                    <div class="input-group">
                        <span class="input-group-addon">名称：</span>
                        <input type="text" class="form-control" style="background:white;" value="" id="authname"/>
                    </div>
                </div>

                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 right-group">
                    <button type="button" class="btn btn-default right-btn " id="searchBt">搜索</button>
                </div>
            </div>
        </div>
    </div>

    <!--数据-->
    <!-- DataTales Example -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                数据
                <!--<a href="#" style="float:right;font-weight: normal;">下载</a>-->
                <!--<button type="button" class="btn btn-link" style="float:right;font-weight: normal;">下载</button>-->
            </h6>

        </div>
        <div class="card-body">
            <div class="table-responsive" id="data">
            </div>
        </div>
    </div>

</div>

<th:block layout:fragment="js">
    <script type="text/javascript">
        // var csrfToken = $("meta[name='_csrf']").attr("content");
        $(function(){
            $("#operators_pack_btn").click(function () {
                if ($("#operators_panel").is(":hidden")) {
                    $("#operators_panel").show(100);
                    $(this).html("<i class=\"fas fa-angle-up\"></i>");
                } else {
                    $("#operators_panel").hide(100);
                    $(this).html("<i class=\"fas fa-angle-down\"></i>");
                }
            });
            $("#searchBt").click(function () {
                search();
            });
            $("#pageSize").change(function(){
                search();
            });
            search();
            $("#authname").keyEnterEvent(search);
        });

        function search(){
            var data={
                authname:$("#authname").val(),
                delmark:0,
                _csrf:csrfToken
            };
            $("#data").datagrid("load",{url:"[[@{/}]]system/role/authSearch",
                data:data,
                showDetail:false,
                async:false,
                showPageSize:true,
                fields:[
                    {name:"check",autoHidden:false,text:"<input name='selectAll' type='checkbox'/>",inTable:true,render:function(row){
                            return "<input name='checkid' type='checkbox' data-id='"+row.id+"' data-name='"+row.authname+"("+row.description+")'/>";
                        }},
                    {name:"id",autoHidden:true,text:"编号",inTable:false},
                    {name:"authname",autoHidden:false,text:"名称",inTable:true},
                    {name:"description",autoHidden:false,text:"描述",inTable:true}
                ],
                dialogTitle:"",
                operations:[
                ],
                afterRenderEach:function(){
                    $("input[name='selectAll']").unbind("click");
                    $("input[name='selectAll']").click(function(){
                        if(this.checked==true){
                            setSelected(true);
                        }else{
                            setSelected(false);
                        }
                    });
                    $("input[name='checkid']").unbind("change");
                    $("input[name='checkid']").change(function () {
                        if (this.checked == true) {
                            addAuth($(this).attr("data-id"),$(this).attr("data-name"));
                        } else {
                            removeAuth($(this).attr("data-id"));
                        }
                        setSelect();
                    });
                },
                webContext:webContext,
                afterLoad:function(){
                    setSelect();
                }
            });

        }

        var auths = new Array();
        var authlist;
        function setSelected(selected){
            if(selected){
                $("input[name='checkid']:checkbox").each(function(){
                    //$(this).attr("checked",true);
                    this.checked='checked';
                    addAuth($(this).attr("data-id"),$(this).attr("data-name"));
                });
            }else{
                $("input[name='checkid']:checkbox").each(function(){
                    $(this).attr("checked",false);
                    removeAuth($(this).attr("data-id"));
                });
            }
            $("#data").datagrid("render");
            if(selected) {
                $("input[name='selectAll']").each(function () {
                    $(this)[0].checked = 'checked';
                })
            }else{
                $("input[name='selectAll']").attr("checked", false);
            }
            setSelect();
        }
        function addAuth(authId,authName){
            if(auths!=null){
                for(var i=0;i<auths.length;i++){
                    if (auths[i].authId == authId||auths[i].value == authId) {
                        return;
                    }
                }
                //console.info("add authId:"+authId);
                auths.push({"authId":authId,"authName":authName});
            }
        }
        function removeAuth(authId){
            //console.info("removeApi->"+authId);
            if(auths!=null){
                for(var i=0;i<auths.length;i++){
                    if (auths[i].authId == authId||auths[i].value == authId) {
                        auths.splice(i,1);
                    }
                }
            }
        }

        function setSelect(){
            //alert("length:"+auths.length);
            if(auths!=null){
                for(var i=0;i<auths.length;i++){
                    $("input[name='checkid']:checkbox").each(function(){
                        if (auths[i].authId == $(this).attr("data-id")||auths[i].value==$(this).attr("data-id")) {
                            $(this).attr("checked","checked");
                        }
                    });
                }
            }
        }

        function getSelect(authlist){
            auths=authlist;
            search();
        }

        function saveAuth() {
            parent.selectAuths(auths);
        }

    </script>
</th:block>
</body>
</html>